<template>
  <div class="p-4px">
    <AppSvgIcon name="App-mobile-menu" width="50px" height="50px"></AppSvgIcon>
    <div class="h-20px"></div>
    <el-input v-model="copyData" placeholder="请输入内容" style="width: 300px">
      <template #append>
        <el-button @click="handleCopy">复制</el-button>
      </template>
    </el-input>
    <div class="h-20px"></div>
    <div class="h-20px"></div>
    <AppSelectIcon width="300" v-model="iconValue"></AppSelectIcon>
    <div class="h-20px"></div>
    <div class="h-20px"></div>
    <el-button type="primary" plain @click="handleEchoIcon">回显图标</el-button>
    <el-button type="danger" plain @click="handleResetIcon">重置图标</el-button>
    <!-- <div class="h-20px"></div>
    <div class="h-20px"></div>
    <AppTag :tagOptions="AppDicts.sys_notice_type" :value="tagValue"></AppTag>
    <div class="h-20px"></div>
    <el-select placeholder="请选择公告类型" v-model="noticeType" style="width: 240px" clearable>
      <el-option v-for="item in AppDicts.sys_notice_type" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
    </el-select> -->
  </div>
</template>

<script setup lang="ts" name="svgIconPage">
import { ref } from "vue";
import { AppMsgSuccess, AppNoticeWarning, AppMsgError } from "@/utils/App";

/** 第二种字典获取数据开始[每次进入页面一次获取所需要的数据源] */
// import { useAppDict } from "@/hooks/dicts/index.ts";
// const { AppDicts } = useAppDict(["sys_notice_type", "sys_user_sex"]);
// const tagValue = ref("1");
// const noticeType = ref();
/** 第二种字典获取数据结束 */

/** 复制指令开始 */

import { useClipboard } from "@vueuse/core";

const { copy, isSupported } = useClipboard();

const copyData = ref<string>("主人，妲己永远陪在你身边👻");

const handleCopy = () => {
  if (!isSupported) {
    AppMsgError("您的浏览器不支持Clipboard API");
    return;
  }
  if (!copyData.value) {
    AppNoticeWarning("请输入要复制的内容");
    return;
  }
  copy(copyData.value);
  AppMsgSuccess(`复制成功：${copyData.value}`);
};

/** 复制指令结束 */

/** 图标选择器开始 */

const iconValue = ref();

const handleResetIcon = () => {
  iconValue.value = "Sunny";
};

const handleEchoIcon = () => {
  AppMsgSuccess(iconValue);
};

/** 图标选择器结束 */
</script>

<style scoped></style>
@/utils/app